<template>
	<div class="tabel-bg-view" v-if="sixthDetailTabelCompontensFlag1">
		<div class="tabel-setting-view">
			<div class="title">
				<p>検査目的選択</p>
				<i class="el-icon-close" @click="CloseTabelDialogFun"></i>
			</div>
			<div>
				<ux-grid ref="singleTable" :data="tableData" style="width: 100%" border :header-cell-style="{
					color: 'rgba(0, 0, 0, 0.85)',
					fontSize: '14px',
					textAlign: 'left',
					fontWeight: 'bold',
					padding: 0,
					height: '32px',
					background: '#F5F5F5',
				}" :cell-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '14px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" :row-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '13px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" highlight-current-row :height="tableHeight" @selection-change="handleSelectionChange">
					<template slot="empty"> No data </template>
					<ux-table-column type="checkbox" width="40"> </ux-table-column>
					<ux-table-column title="検査目的">
						<template slot-scope="scope">
							<p class="hideTextView" :title="scope.row.label">
								{{ scope.row.label }}
							</p>
						</template>
					</ux-table-column>
				</ux-grid>
			</div>
			<div class="bottom">
				<div class="right-btn-view">
					<el-button @click="CloseTabelDialogFun">Cancel</el-button>
					<el-button type="primary" class="bg-btn" @click="submitTabelConfig">OK</el-button>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
import { getLocalStorage } from "../../../utils/storage";
import {
	getInspPurposeCombox, updInspPurpose
} from "../../../api/api";
import eventBus from "../../../eventBus/bus";
export default {
	props: {
		sixthDetailTabelCompontensFlag1: Boolean,
	},
	name: "TabelCompontens",
	data() {
		return {
			tableHeight: 388,
			tableData: [],

			userName: getLocalStorage("userName"),
			selectArr: [],
		};
	},
	components: {},
	watch: {},
	methods: {
		handleSelectionChange(val) {
			this.selectArr = val;
		},
		CloseTabelDialogFun() {
			this.$emit("CloseMSDetailTabelDialog");
		},
		//保存
		async submitTabelConfig() {
			let dataJson = {
				InspPurList: this.tableData
			};
			dataJson.InspPurList.forEach(item => {
				item.isHidden = 0;
				this.selectArr.forEach(item1 => {
					if (item.key == item1.key) {
						item.isHidden = 1;
					}
				})
			})

			let res = await updInspPurpose(dataJson);
			if (res.data.code != 0) {
				this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
			}
			eventBus.$emit("LoadDetailTabelData");
			this.$emit("CloseMSDetailTabelDialog");
		},
		async initFn() {
			let res = await getInspPurposeCombox({});
			this.tableData = res.data.data;
			setTimeout(() => {
				this.tableData.forEach((i, v) => {
					if (i.isHidden) {
						this.$refs.singleTable.toggleRowSelection([
							{
								row: this.tableData[v],
								selected: true
							}
						])
					} else {
						this.$refs.singleTable.toggleRowSelection([
							{
								row: this.tableData[v],
								selected: false
							}
						])
					}
				})
			}, 300);
		}

	},
	created() {
	},
	mounted() {
		this.initFn();

	},
	destroyed() { },
	updated() {
		// 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素
		var elements = document.querySelectorAll('.elx-cell--checkbox');

		// 遍历这些元素  
		elements.forEach(function (element) {
			// 修改每个元素的title属性  
			element.setAttribute('title', '');
		})
	},
};
</script>
<style lang="scss" scoped>
.tabel-bg-view {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 666;

	::v-deep .el-input__inner {
		border: 0 none;
		height: 32px;
		background: transparent;
		padding: 0;
	}

	::v-deep input::-webkit-outer-spin-button,
	::v-deep input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
}

.tabel-setting-view {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 492px;
	transform: translate(-50%, -50%);
	background: #ffffff;
	box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
		0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);

	.title {
		// width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		padding: 0 12px;
		justify-content: space-between;
		font-size: 16px;
		color: rgba(0, 0, 0, 0.85);

		.el-icon-close {
			cursor: pointer;
		}
	}

	.bottom {
		padding: 0 12px;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
	}
}

.left-button {
	width: 112px;
	height: 32px;
	// background: #ffffff;
	// border-radius: 4px;
	// border: 1px solid #d9d9d9;
}

.right-btn-view {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	button {
		width: 86px !important;
		height: 32px;
		// background: #ffffff;
		// border-radius: 4px;
		// border: 1px solid #d9d9d9;
	}

	.bg-btn {
		margin-left: 16px;
		width: 86px !important;
		// background: #106ebe;
		// color: #fff;
	}
}
</style>
